<template>
  <div class="tabbar">
    <div class="tab">
      <div class="tab-item" v-for="(item,$index) in tabArray" :key="$index" @click="active($index, item)"
           :class="{'active':$route.meta.parent === item.name}">
        {{item.text}}
      </div>
    </div>
    <router-view/>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    methods: {
      active(index, item) {
        this.$router.push({path: item.router})
      }
    },
    props: {
      tabArray: {
        type: Array,
        default() {
          return [{name: '请在父组件中传入路由地址和名称', router: '/#'}]
        }
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .tabbar
    .tab
      display inline-flex
      width 100%
      height 75px
      .tab-item
        flex 1
        width 100%
        text-align center
        border-top 4px solid #F5F5FA
        display inline-block
        line-height 69px
        font-size 32px
        color #333
        border-bottom 4px solid #F5F5FA
        &.active
          border-bottom 4px solid #2ECC40

</style>
